<template>

<!--  <el-form :inline="true" class="demo-form-inline">-->
<!--    <el-form-item label="所属门店">-->
<!--      <el-select v-model="selectedStore.mname" placeholder="请选择">-->
<!--        <el-option-->
<!--            v-for="store in stores"-->
<!--            :key="store.id"-->
<!--            :label="store.mname"-->
<!--            :value="store.id"-->
<!--        ></el-option>-->
<!--      </el-select>-->
<!--    </el-form-item>-->

<!--    <el-form-item>-->
<!--      <el-button type="primary" @click="search">查询</el-button>-->
<!--    </el-form-item>-->
<!--  </el-form>-->

  <el-table :data="categories" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="分类名称" width="180"></el-table-column>
  </el-table>

  <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirmSelection">确定</el-button>
    </span>

</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import router from "@/router/index.js";
import axios from "axios";

const selectedStore = ref('')
const categories = ref([])
const stores = ref([])


const getdishcategoryName = () => {
  axios.get("/coupons/getdishcategoryName")
      .then(res => {
        categories.value = res.data
      })
      .catch(err => {
        console.error('获取分类失败:', err)
        ElMessage.error('获取分类失败')
      })
}
// const getunames = () => {
//   axios.get("/coupons/getunames").then((res) => {
//     stores.value = res.data
//   })
// }

const handleSelectionChange = (selection) => {
  categories.value = selection
}

const confirmSelection = () => {
  if (categories.value.length === 0) {
    ElMessage.warning('请至少选择一个分类')
    return
  }

  try {
    const selectedCategoryData = categories.value.map(category => ({
      name: category.name,
      checked: category.checked
    }))

    console.log('Selected categories:', selectedCategoryData)
    ElMessage.success(`已选择 ${selectedCategoryData.length} 个分类`)
  } catch (error) {
    console.error('数据处理失败:', error)
    ElMessage.error('数据处理失败，请重试')
  }
}
const cancel = () => {
  router.push({name: 'AddCouponPage2'})
}
onMounted(() => {
  getdishcategoryName();

})
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}

.el-select .el-input__inner {
  background-color: #f5f5f5; /* 设置输入框背景色 */
  color: #333; /* 设置输入框文本颜色 */
}

.el-select .el-input__icon {
  color: #333; /* 设置图标颜色 */
}

.el-select-dropdown {
  background-color: #fff; /* 设置下拉列表背景色 */
  border-color: #dcdfe6; /* 设置下拉列表边框颜色 */
}

.el-select-dropdown .el-scrollbar__wrap {
  background-color: #fff; /* 设置下拉列表内容区域背景色 */
}

.el-select-dropdown .el-scrollbar__view {
  color: #333; /* 设置下拉列表文本颜色 */
}

.el-select-dropdown .el-option {
  color: #333; /* 设置选项文本颜色 */
}

.el-select-dropdown .el-option.selected {
  background-color: #f0f7ff; /* 设置选中选项背景色 */
  color: #409eff; /* 设置选中选项文本颜色 */
}

.el-select-dropdown .el-option.hover {
  background-color: #f5f7fa; /* 设置悬停选项背景色 */
  color: #409eff; /* 设置悬停选项文本颜色 */
}
</style>